<template>
<!-- 中信银行 我的 2021/10/22 -->
  <div class="my-box" :class="(skinInfo.backImg|| skinInfo.backColor) ?'mine-box-zxyh':''" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
     
  <div class="ZxyhHeaderWrapper" :class="(skinInfo.backImg|| skinInfo.backColor) ?'mine-box-zxyh':''" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
     
     <ZxyhHeader v-if="getPlatform=='app'"></ZxyhHeader>
</div>
     <div class="top-box">
       <div class="top-left-box">
         <img :src="userInfo_tx+'?x-oss-process=image/resize,m_fixed,h_108,w_108'" alt="">
          <p>
            <span>用户：{{nikename}}</span>
            <!-- <span>ID：{{this.$store.state.userInfo.un}}</span> -->
          </p>
       </div>
       <!-- <div class="top-right-box"><p>编辑资料</p></div>    -->
     </div>
     <!-- 我的预约 -->
     <div class="my-order" v-if="orderList.length>0">
       <p class="title-h2">
         <span>我的预约</span>
         <span @click="orderMore">更多</span>
       </p>
       <ul class="detail-box">
         <li v-for="(item,i) in orderList" :key="i" @click="orderRoom(item)">
           <div class="li-main-box">
              <img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_144,w_252'">       
              <span v-if="item.roomStatus=='0'" class="state">预告</span>
              <span v-else-if="item.roomStatus=='1'" class="state notice">直播中</span>
              <span v-else-if="item.roomStatus=='2'" class="state end">已结束</span>
              <p class="date">{{item.beginTime && item.beginTime.substring(0,16)}}</p>
           </div>
           <p class="title">{{item.title}}</p>
         </li>
       </ul>
     </div>
      <!-- 观看记录-->
     <div class="viewing-records" v-if="recordList.length>0">
       <p class="title-h2">
         <span>观看记录</span>
         <span @click="watchMore" v-if="recordList.length>4">更多</span>
       </p>
       <ul class="detail-box">
         <li v-for="item in recordList" :key="item.vid" @click="linkLive(item)">
           <div class="li-main-box">      
              <img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_144,w_252'" alt="">
              <p class="date">{{item.viewTime && item.viewTime.substring(0,16)}}</p>
           </div>
           <p class="title">{{item.title}}</p>
         </li>
       </ul>
     </div>
     <!-- 常用功能 -->
     <div class="common-functions-box">
       <h3>常用功能</h3>
       <ul class="main-box">
         <li v-for="item in commonFunctions" :key="item.name" @click="myLink(item.name)">
            <img :src="item.icon" alt="">
            <p>{{item.name}}</p>
         </li>
       </ul>
     </div>
     <!-- 轮播图 -->
     <van-swipe v-if="bannerList.length>0"  class="my-swipe" :autoplay="3000" indicator-color="#EFBF80">
        <van-swipe-item v-for="item in bannerList" :key="item.id" @click="imgLink(item)"><img :src="item.viewpagerUrl+'?x-oss-process=image/resize,m_fixed,h_180,w_706'" alt=""></van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
export default {
   components:{
     ZxyhHeader,
      },
    props: {
      
      
    },
    data() {
      return {
        nikename: this.$store.state.userInfo.nickname || window.localStorage.getItem('userNickName'),
        un: this.$store.state.userInfo.un,
        userInfo_tx: this.$store.state.userInfo.wxpic || imgTx,
        iconColor: '',
        onlyChannel: this.$channel,
        getPlatform: fun.getPlatform(), //app wx
        mineHeaderClass: '',
        zxxykzxClass: '',
        commonFunctions:[{icon:require('../assets/images/zxyh/my/focus.png'),name:'我的关注'},
                        //  {icon:require('../assets/images/zxyh/my/record.png'),name:'观看记录'},
                         {icon:require('../assets/images/zxyh/my/prize.png'),name:'我的奖品礼券'},  //上线需隐藏
                        //  {icon:require('../assets/images/zxyh/my/red_envelope.png'),name:'我的红包'},
                         {icon:require('../assets/images/zxyh/my/collect.png'),name:'我的收藏'},],//常用功能
        orderList:[],
        recordList:[],
        bannerList:[]                 
        
      };
    },
    computed: {
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
    },
    created() {
      this.getOrderList();
      this.getRecordList();
      this.getBannerList();
    },
    mounted() {
      
    },
    methods: { 
      orderMore(){// 预约更多
          this.$router.push(`/${this.$channel}/order`)
      },
      watchMore(){//观看记录
        this.$router.push(`/${this.$channel}/watchHistory`)
      }, 
      myLink(data){// 常用功能跳转
        switch (data) {
          case '我的关注':
            this.$router.push(`/${this.$channel}/mineAttention`)
            break;
          case '观看记录':
            this.watchMore();
            break;
           case '我的奖品礼券':
             this.$router.push(`/${this.$channel}/minePrizeListPage`)
            break;
           case '我的红包':
            this.$router.push(`/${this.$channel}/mineRedPacket`)
            break;
           case '我的收藏':
             this.$router.push(`/${this.$channel}/mineCollect`)
            console.log('我的收藏')
            break;   
          default:
            break;
        }
      },
      // 我的预约
      getOrderList(){    
				this.$http.get("/h5live/personCenter/remindTop").then(
					res => {
            const {code,data} = res.data
            if(code=='000000'){
              this.orderList = data.slice(0,5) //数组前五个
             }}
			  ).catch(err=>{});},
      
       getRecordList(){
         this.$http.get("/h5live/getRecordList")
					.then(res => {
						const {code,data} = res.data
            if(code=='000000'){
               window.sessionStorage.setItem(this.$channel+'recordList',JSON.stringify(data))   //更多观看记录    
                  let newRecordList = []
                  for (let i =0;i<data.length;i++){
                        for (let j = 0;j<data[i].info.length;j++) {
                          newRecordList.push(data[i].info[j])
                        }
                      }
                  this.recordList = newRecordList.slice(0,5)
               }
                               
					})
					.catch(response => {
						console.log(response);
					});

       },
       // 获取轮播图
      getBannerList(){    
				this.$http.get("/h5live/personCenter/viewpager").then(
					res => {
            const {code,data} = res.data
            if(code=='000000'){
              this.bannerList = data
             }}
			  ).catch(err=>{});
          },
          //轮播图跳转
        imgLink(item){
          if(item.type == '1'){ //广告 长图
            this.$store.dispatch("dispatchBannerImgLink", item.typeUrl)
            this.$router.push(`/${this.$channel}/bannerLink`);
          }else{//外链 type 0
            window.location.href = item.typeUrl
          }
        },
        // 预约
        orderRoom(item){
          this.$router.push(`/${this.$channel}/liveRoom/${item.roomId}?dzhPage=true`);
        },
        // 观看记录列表
        linkLive(item) {
				this.$router.push(`/${this.$channel}/liveBack/${item.vid}?dzhPage=true`);
			},  
    },
    watch: {
      
    },
    filters: {
      
      }
    
  };

</script>

<style scoped="scoped">
.my-box{
  min-height: 100vh;
  width: 100vw;
  background: rgba(246, 247, 252, 1);
  padding-bottom: 116px;
  padding-top: 148px;
}
.my-box >>> .header-box ,.my-box >>> .header-empty{
  background: none;

}

.ZxyhHeaderWrapper{
  z-index: 9999999;
  height: 148px;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
}
.top-box{
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  margin-bottom: 72px;
 
}
.top-left-box{
  display: flex;
  flex-direction: row;

} 
.top-left-box img{
  width: 108px;
  height: 108px;
  margin-left: 32px;
  margin-right: 30px;
  border-radius: 50%;
} 
.top-left-box p{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top-left-box p span:nth-of-type(1){
  /* margin-bottom: 16px; */
  font-size: 36px;
  font-weight: 500;
  color: #333333;
}
.top-left-box p span:nth-of-type(2){
  font-size: 28px;
  color: #666666;
}
.top-right-box p{
  height: 54px;
  width: 154px;
  font-size: 28px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 54px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
}
.common-functions-box{
  margin: 24px auto;
  width: 686px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 24px;
}
.common-functions-box h3{
  display: flex;
  align-items: center;
  padding: 36px 0 39px 32px;
  font-size: 32px;
  font-weight: 500;
  color: #333333;
}
.common-functions-box h3::before{
    content: '';
    height: 44px;
    width: 44px;
    margin-right: 16px;
    background: url('../assets/images/zxyh/fun.png') no-repeat;
    background-size: 100% 100%;
}
.main-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.main-box li{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin-bottom: 30px;
}
.main-box li img{
  height: 48px;
  width: 48px;
  margin-bottom: 11px;
}
.main-box li p{
  font-size: 24px;
  color: #27344B;
  line-height: 30px; 
}
.my-swipe{
  width: 686px;
  margin: 0 auto 60px;
  border-radius: 24px;
}
.my-swipe >>> .van-swipe__indicator{
  height: 10px;
  width: 10px;
  border-radius: 24px;
  background: #E8E8E8;
}
  .my-swipe .van-swipe-item {
    height: 180px;
    text-align: center;
  }
  .my-swipe .van-swipe-item img{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 24px;
  }
  /* 我的预约 我的关注 */

  .my-order{
    z-index: 1;
  }
  .my-order,.viewing-records{
    padding: 36px 0 39px 32px;
    margin: 24px auto;
    width: 686px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 24px;
  }
  .title-h2{
    height: 45px;
    margin-bottom: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .title-h2 :nth-of-type(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 32px;
    font-weight: 500;
    color: #333333;
  }
  .my-order .title-h2 :nth-of-type(1)::before{
    content: '';
    height: 44px;
    width: 44px;
    margin-right: 16px;
    margin-bottom: 6px;
    background: url('../assets/images/zxyh/order.png') no-repeat;
    background-size: 100% 100%;
  }
  .viewing-records .title-h2 :nth-of-type(1)::before{
    content: '';
    height: 44px;
    width: 44px;
    margin-right: 16px;
    margin-bottom: 6px;
    background: url('../assets/images/zxyh/history.png') no-repeat;
    background-size: 100% 100%;
  }
  .title-h2 :nth-of-type(2),.title-h2 :nth-of-type(2)::after{
    font-size: 24px;
    font-weight: 500;
    color: #666666;
  }
  .title-h2 :nth-of-type(2)::after{
    content:">";
    margin-right: 20px;
    margin-left: 6px;
  }
  .detail-box{
    display: flex;
    overflow-x: auto;
  }
  .detail-box li{
    width: 252px;
    margin-right: 22px;
  }
  .li-main-box{
    height: 144px;
    width: 252px;
    margin-bottom: 6px;
    border-radius: 16px;
    position: relative;
  }
  .li-main-box img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 144px;
    width: 252px;
    border-radius: 16px;
  }
  .state{
    position: absolute;
    left: 15px;
    top: 12px;
    width: 82px;
    height: 36px;
    background:linear-gradient(138deg, #42F5E3 0%, #296EEB 100%);;
    border-radius: 18px;
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 2;
    text-align: center;
    color: #FFFFFF;
    transform: scale(0.8);
  }
  .state.notice{
    background:linear-gradient(146deg, #FFA300 0%, #FF0000 100%);
  }
  .state.end{
    background:linear-gradient(146deg, #999999 0%, #666666 100%);
  }
  .date{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding-left: 3px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 0px 0px 16px 16px;
    font-size: 22px;
    font-weight: 500;
    color: #FFFFFF;
  }
  .title{
    font-size: 26px;
    font-weight: 400;
    color: #333333;
    line-height: 37px;
    letter-spacing: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .header-conatiner-zxyhIos,
.header-conatiner {
  /* background: #FFFFFF; */
  z-index: 9999999;
}
</style>
